import React, {
    Component,
} from 'react';

import {
    Image,
    Text,
    View,
    FlatList,
    TouchableWithoutFeedback,
} from 'react-native';
import {CachedImage} from "react-native-img-cache";
import { connect } from 'react-redux';

import CXIcon from "../../components/cxicon/CXIcon";
import TabHeader from '../../components/tabheader';

import { recentChat } from '../../actions/netease';
import { SETCHATLOG } from '../../actions/msg';
import { format_time } from '../../actions/time';

import styles from "./css/msg";

class RecentChat extends Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: '消息',
            tabBarIcon: ({focused, tintColor})=>(
                <CXIcon name="message_tab" size={26} color={tintColor} />
            ),
        };
    }

    constructor(props){
        super(props);
        this.state = {
            list: []
        };
    }

    componentDidMount(){
        recentChat((lists) => {
            this.props.dispatch({
                type: SETCHATLOG,
                lists: lists
            });
            this.setState({list: lists});
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TabHeader title="消息" />
                <View style={styles.box1}>
                    <View style={styles.citem}>
                        <View style={styles.body}>
                            <Image style={styles.cavatar} resizeMode="stretch" source={require('./imgs/im_sweet_circle.png')} />
                            <View style={styles.content_box}>
                                <Text style={styles.nick}>密友圈</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.box2}>
                    <View style={styles.citem}>
                        <View style={styles.body}>
                            <Image style={styles.cavatar} resizeMode="stretch" source={require('./imgs/im_stranger_girl.png')} />
                            <View style={styles.content_box}>
                                <Text style={styles.nick}>陌生学妹</Text>
                            </View>
                        </View>
                    </View>
                    <FlatList
                        data={this.state.list}
                        keyExtractor={(item, index) => item.uid}
                        renderItem={({item}) => 
                            <TouchableWithoutFeedback
                            onPress={() => {
                                this.props.navigation.navigate('ChatDetail', {transition: 'slide', tuid: item.uid, tavatar: item.avatar, tnick: item.name});
                            }}
                            >
                                <View style={styles.citem}>
                                    <View style={styles.body}>
                                        <CachedImage 
                                            style={styles.cavatar} 
                                            resizeMode="stretch" 
                                            source={{uri: item.avatar}}
                                            defaultSource={require('./imgs/default_dynamic_bg.png')} />
                                        <View style={styles.content_box}>
                                            <Text style={styles.nick}>{item.name}</Text>
                                            <Text style={styles.content}>{this.props.chatlist[item.uid][this.props.chatlist[item.uid].length - 1].content.substr(0, 16)}</Text>
                                        </View>
                                    </View>
                                    <Text style={styles.ctime}>{format_time(this.props.chatlist[item.uid][this.props.chatlist[item.uid].length - 1].time)}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        }
                    />
                </View>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
      chatlist: state.chatlog.list
    }
  }
  
  export default connect(mapStateToProps)(RecentChat);